<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>模仿百度下拉搜索框</title>
        <script>
            function test(data) {
                var oBox = document.getElementById("box");
                var str = "";
                
                if(data.s.length) {
                    oBox.style.display = "block";
                    for(var i=0; i<data.s.length; i++) {
                        str += "<li><a target='_blank' href='http://www.baidu.com/s?wd="+data.s[i]+"'>"+data.s[i]+"</a></li>";
                    }
                }else {
                    oBox.style.display = "none";
                }
                oBox.innerHTML = str;
            }
        </script>
        <script>
            window.onload = function () {
                var oQ = document.getElementById("q");
                var oBox = document.getElementById("box");
                oQ.onkeyup = function () {
                    if(this.value != "") {
                        var oScript = document.createElement("script");
                        oScript.src = "http://suggestion.baidu.com/su?wd="+this.value+"&cb=test";
                        document.body.appendChild(oScript);
                    }else {
                        oBox.style.display = "none";
                    }
                }
            }
        </script>
        <style>
            #q {
                width:500px;
                height:30px;
                padding:5px;
                border:1px solid #000;
            }
            #box {
                width:510px;
                border:1px solid #000;
                margin:0;
                padding:0;
                display:none;
            }
            #box li {
                list-style-type:none;
                margin:0;
            }
            #box li a {
                text-decoration:none;
                color:#000;
                line-height:30px;
                padding:4px;
                display:block;
            }
            #box a:hover {
                background:#ccc;
                
                padding:4px;
            }
        </style>
    </head>
    <body>
        <input type="text" id="q"/>
        <ul id="box">
            <li><a href="">11111</a></li>
            <li><a href="">11111</a></li>
            <li><a href="">11111</a></li>
            <li><a href="">11111</a></li>
            <li><a href="">11111</a></li>
        </ul>
    </body>
</html>